<template>
  <view class="page-box">
    <view class="background-box"></view>
    <view class="content">
      <view class="title">八维简介</view>
      <view class="inner-box">
        <view class="item-box" v-for="(item,inedx) in dataTable" :key="inedx">
          <view class="item" v-for="(item2,index2) in item.innerDataTable" :key="index2"><text class="span">{{item2.header}}</text>{{item2.data}}</view>
        </view>
      </view>
    </view>

    <details-btn-box class="details-box"></details-btn-box>

  </view>
</template>

<script>

import DetailsBtnBox from '@/components/DetailsBtnBox'
export default {
  name: 'dimension',
  components: {
    DetailsBtnBox
  },
  data() {
    return {
      dataTable: [
        {
          innerDataTable :[
            {
              header: '外倾E:',
              data: '关注自己如何影响外部环境:将心理能量和注意力聚集于外部世界和与他人的交往上。例如:聚会1 评论/聊天。'
            },
            {
              header: '内倾I:',
              data: '关注外部环境的变化对自己的影响:将心理能量和注意力聚集于内部世界，注重自己的内心体验。例如:独立思考，看书，避免成为注意的中心，听的比说的多'
            }
          ]
        },
        {
          innerDataTable :[
            {
              header: '触觉S:',
              data: '关注由感觉器官获取的具体信息:看到的、听到的、闻到的、尝到的、触摸到的事物。例如:关注细节、喜欢描述、喜欢使用和琢磨已知的技能。'
            },
            {
              header: '直觉N:',
              data: '关注事物的整体和发展变化趋势:灵感、预测、暗示，重视推理。例如:重视想象力和独创力，喜欢学习新技能、但容易厌倦，喜欢使用比喻，跳跃性地展现事实'
            }
          ]
        },
        {
          innerDataTable :[
            {
              header: '思维T:',
              data: '重视事物之间的逻辑关系，喜欢通过客观分析作决定评价。例如:理智、客观、公正'
            },
            {
              header: '情感F:',
              data: '以自己和他人的感受为重，将价值观作为判定标准。例如:对行为对他人情感的影响敏感，认为圆通和坦率同样重要'
            }
          ]
        },
        {
          innerDataTable :[
            {
              header: '判断J:',
              data: '喜欢做计划和决定，愿意进行管理和控制，希望生活井然有序。例如:重视结果(重点在于完成任务)、按部就班、有条理、尊重时间期限、喜欢做决定。'
            },
            {
              header: '知觉P:',
              data: '灵活、试图去理解、适应环境、倾向于留有余地，任事情自由发展。例如:重视过程、随信息的变化不断调整目标'
            }
          ]
        }
      ]
    }
  },
  onLoad(options) {
    uni.showShareMenu({
      path: '/pages/index/index',
      success(res) {
        console.log(`showShareMenu 调用成功`);
      },
      fail(res) {
        console.log(`showShareMenu 调用失败`);
      },
    });
  },
  methods: {
    onShareAppMessage() {
      let path = '/pages/index/index'
      if(uni.getStorageSync('qutui_info')) {
        path+= `?qutui_user_id=${uni.getStorageSync('qutui_info').qutui_user_id}&project_id=${uni.getStorageSync('qutui_info').project_id}`
      }
      else if(uni.getStorageSync('qrCodeInfo')){
        path+= `?wechat_user_id=${uni.getStorageSync('qrCodeInfo').promote_user_id}&mini_app_code=${uni.getStorageSync('qrCodeInfo').mini_app_code}&product_id=${uni.getStorageSync('qrCodeInfo').product_id}`
      }
      return {
        path,
        templateId:'glo725gg2dj70ekjd0',
        success(res) {
          uni.hideShareMenu({
            success(res) {
              console.log(`showShareMenu 调用成功`);
            },
            fail(res) {
              console.log(`showShareMenu 调用失败`);
            },
          });
        },
        fail(err) {
          console.log(err);
        },
      };
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-box {
    position: relative;
    padding-top: 61rpx;

    .background-box {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      right: 0rpx;
      bottom: 0rpx;
      background:linear-gradient(314deg,rgba(11,116,215,1) 0%,rgba(0,133,226,1) 100%);
    }

    .content {
      position: relative;

      .title {
        padding-bottom: 37rpx;
        font-size:34rpx;
        font-weight:500;
        color:rgba(255,255,255,1);
        text-align: center;
      }

      .inner-box {
        padding: 0rpx 25rpx;

        .item-box {
          margin-bottom: 16rpx;
          padding: 40rpx 50rpx 60rpx 50rpx;
          width: 100%;
          background:rgba(255,255,255,1);
          border-radius:15rpx;
          box-sizing: border-box;

          .item {
            font-size:28rpx;
            font-weight:500;
            color: #212121;
            line-height:42rpx;

            .span {
              color:rgba(0,107,190,1);
            }
          }
        }
      }
    }

    ::v-deep .details-btn-box {
      position: relative;
      padding: 60rpx 63rpx 65rpx 63rpx;
    }
  }
</style>
